<template>
  <view class="guide-container">
    <swiper
      v-if="isShow"
      class="swiper"
      :circular="false"
      indicator-dots
      indicator-color="#F2F2F2"
      indicator-active-color="#4EA770"
      :autoplay="false"
      :interval="5000"
      :duration="300"
    >
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="swiper-item">
          <view class="skip" @click="skip">跳过</view>
          <image :src="item.image" />
          <view class="title" v-if="item.title" v-html="item.title" />
          <view class="subtitle" v-if="item.subtitle" v-html="item.subtitle" />
          <view class="button" v-if="item.showButton" @click="skip">立即体验</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>
<script setup>
import { ref, onMounted } from "vue";
import page1 from "@/static/guide/page1.png";
import page2 from "@/static/guide/page2.png";

onMounted(() => {
  const isFirstOpen = uni.getStorageSync("isFirstOpen");
  if (isFirstOpen) {
    uni.redirectTo({
      url: "/pages/index/index",
    });
  } else {
    isShow.value = true;
    uni.setStorageSync("isFirstOpen", true);
  }
});

const list = ref([
  {
    image: page1,
    title: "强化现场一致性管理",
    subtitle: "加强诚信化监管体系",
    showButton: false,
  },
  { image: page2, title: "社会消防技术服务<p>机构管理平台", showButton: true },
]); // 引导页列表
const isShow = ref(false); // 是否显示

// 跳过
const skip = () => {
  uni.redirectTo({
    url: "/pages/index/index",
  });
};
</script>
<style lang="scss" scoped>
.guide-container {
  height: 100vh;
  background-color: #fff;
  .swiper {
    height: inherit;
    .swiper-item {
      position: relative;
      height: inherit;
      background: #fff;
      .skip {
        position: absolute;
        color: #757575;
        font-size: 28rpx;
        right: 40rpx;
        top: 80rpx;
        z-index: 9;
      }
      image {
        position: absolute;
        top: 236rpx;
        left: 0;
        right: 0;
        height: 750rpx;
        width: 750rpx;
      }
      .title {
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        bottom: 340rpx;
        font-weight: 600;
        font-size: 60rpx;
        color: #212121;
        letter-spacing: 8rpx;
      }
      .subtitle {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 240rpx;
        text-align: center;
        font-size: 28rpx;
        color: #bdbdbd;
        letter-spacing: 26rpx;
      }
      .button {
        position: absolute;
        bottom: 170rpx;
        left: 40rpx;
        right: 40rpx;
        height: 100rpx;
        background: linear-gradient(90deg, #4ea770 0%, #5fc793 100%);
        box-shadow: 0 12rpx 30rpx 2rpx rgba(78, 167, 112, 0.5);
        border-radius: 54rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 32rpx;
        &:active {
          background: linear-gradient(90deg, #4b9e6b 0%, #57b787 100%);
        }
      }
    }
  }
}
:deep(.uni-swiper-dots) {
  bottom: 60rpx;
}
:deep(.uni-swiper-dot) {
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
}
:deep(.uni-swiper-dot-active) {
  width: 80rpx;
}
</style>
